<template>
  <div id="balance" class="view">
    <x-header :left-options="{backText: ''}">余额账单</x-header>
    <div class="content">
      <div class="mescroll" id="balance_mescroll">
        <div class="scroll">
          <div class="head">
            <div class="posi_bala">
              <div class="bala">
                <p>余额</p>
              </div>
              <div class="cash">
                <h2>{{userCKCount}}</h2>
                <span @click="$router.push({path: '/activityimmediately',query: {userid: user.user_id,goodsid: $route.query.id}})">提现 &gt;</span>
              </div>
<!--              <div class="award"><p>冻结奖励：{{freeze}}</p>-->
<!--                <img src="./image/ask_icon@2x.png" alt="" @click="textok()">-->
<!--              </div>-->
            </div>
          </div>
          <div class="shade">
            <img src="http://img.zanjl.com/Content/img/image/lucency_back.png" alt="">
            <span @click="$router.push({path: '/activityimmediately',query: {userid: user.user_id,goodsid: $route.query.id}})"></span>
<!--            <i @click="textok()"></i>-->
          </div>
          <div class="conList">
            <h2 class="conListH2">账单明细</h2>
            <template>
              <div class="invitation">
                <div class="title-card">
                  <div>分类</div>
                  <div>支付类别</div>
                  <div>金额</div>
                  <div>余额</div>
                </div>
                <div class="card"
                     :key="item.flow_id"
                     v-for="item in dataList">
                  <div class="top">
                    <template>
                      <div class="cat-unknown"
                           v-if="item.flow_way===0">未知</div>
                      <div class="cat-stock-in"
                           v-if="item.flow_way===1">进货</div>
                      <div class="cat-stock-out"
                           v-if="item.flow_way===2">出货</div>
                      <div class="cat-withdrawl"
                           v-if="item.flow_way===3">提现</div>
                      <div class="cat-reward"
                           v-if="item.flow_way===4">奖励</div>
                      <div class="cat-refund"
                           v-if="item.flow_way===5">保本金退款</div>
                    </template>
                    <template>
                      <div v-if="item.paymentmethod===0">奖励</div>
                      <div v-if="item.paymentmethod===1">余额</div>
                      <div v-if="item.paymentmethod===2">银行卡</div>
                      <div v-if="item.paymentmethod===3">支付宝</div>
                    </template>

                    <div>{{item.flow_amount}}</div>
                    <div>{{item.position_balance}}</div>
                  </div>
                  <div class="bottom">
                    <template>
                      <div class="no"
                           v-if="item.flow_way===0">未知</div>
                      <div class="no"
                           v-if="(item.flow_way===1 || item.flow_way===2) && item.trading_status===0">委托</div>
                      <div class="no"
                           v-if="(item.flow_way===1 || item.flow_way===2) && item.trading_status===1">成交</div>
                      <div class="no"
                           v-if="(item.flow_way===1 || item.flow_way===2) && item.trading_status===2">已撤单</div>
                      <div class="no"
                           v-if="item.flow_way===3 && item.withdrawal_state===0">待审核</div>
                      <div class="no"
                           v-if="item.flow_way===3 && item.withdrawal_state===1">已通过</div>
                      <div class="no"
                           v-if="item.flow_way===3 && item.withdrawal_state===2">已拒绝</div>
                      <div class="no"
                           v-if="item.flow_way===3 && item.withdrawal_state===3">已提现</div>
                      <div class="no"
                           v-if="item.flow_way===4">{{item.relationship_user}}</div>
                      <div class="no"
                           v-if="item.flow_way===5">已发放</div>
                    </template>
                    <div class="date">{{item.recording_time}}</div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div id="balance_noData"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import MescrollVue from 'mescroll.js/mescroll.vue'
import { getBillingDetails, getP2PUserPositions, getfreezeprice } from '@api'
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
import { XButton, XTable, XHeader, Flexbox, FlexboxItem, Grid, GridItem } from 'vux'
import { formatDate } from '../../filters/date.js'
import MeScroll from 'mescroll.js'
import qs from 'qs'
export default {
  // 转换时间格式
  filters: {
    formatDate (time) {
      var dtime = time.slice(6, 19)
      var date = new Date(parseInt(dtime))
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  name: 'my',
  data () {
    return {
      userCKCount: 0, // 会员余额
      dataList: [], // 对象属相不可以使用 ‘null’ 作为初始化值
      postData: {
        page: 1,
        rows: 20,
        sord: 'desc',
        sidx: 'recording_time',
        freeze: 0 // 账户奖励冻结资金
      },
      meScroll: null
    }
  },
  components: {
    XButton,
    XHeader,
    Grid,
    GridItem,
    XTable,
    Flexbox,
    FlexboxItem
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    this.initMeScroll()
  },
  activated () {
    this.initMeScroll()
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    textok () {
      this.$vux.toast.show({
        text: '您的原始货单未全部解封，冻结奖励在原始货单全部解封后进入余额。请尽快解封原始货单。',
        time: 3000,
        type: 'text',
        position: 'default',
        width: 'auto'
      })
    },
    // 账户余额查询
    async loadgetP2PUserPositions () {
      let form = new FormData()
      form.append('position_goods_id', this.$route.query.id)
      form.append('position_user_id', this.user.user_id)
      let res = await getP2PUserPositions(form)
      if (res && res.data !== null && res.code === 200) {
        if (res.data.position_balance !== null && res.data.position_balance !== 0) {
          this.userCKCount = res.data.position_balance
        } else {
          this.userCKCount = 0
        }
      }
    },
    // 获取账户奖励冻结资金
    async loadfreezeprice () {
      let from = new FormData()
      from.append('goodsid', this.$route.query.id)
      from.append('userid', this.user.user_id)
      let res = await getfreezeprice(from)
      if (res && res.code === 200) {
        this.freeze = res.data
      }
    },
    async loaduserBillingDetails (page) {
      this.setLoading({
        status: true,
        opacity: 0
      })
      this.postData.page = page.num
      this.postData.rows = page.size
      this.postData.user_id = this.user.user_id
      this.postData.goods_id = this.$route.query.id

      let res = await getBillingDetails(qs.stringify(this.postData))
      this.setLoading(false)
      if (res && res.code === 200) {
        if (page.num === 1) {
          this.dataList = []
        }
        this.dataList = [...this.dataList, ...res.data.list]
        let hasNext = (this.dataList.length < res.data.length)
        this.meScroll.endSuccess(res.data.length, hasNext)
      } else {
        this.meScroll.endErr()
      }
    },
    // 初始化滚动区
    initMeScroll () {
      let self = this
      this.$nextTick(() => {
        if (this.meScroll) {
          this.meScroll.resetUpScroll()
        } else {
          this.meScroll = new MeScroll('balance_mescroll', {
            up: {
              callback (page) {
                self.loadgetP2PUserPositions()
                self.loaduserBillingDetails(page)
                self.loadfreezeprice()
              },
              noMoreSize: 1,
              htmlNodata: '<p class="upwarp-nodata">我是有底线的</p>',
              empty: {
                warpId: 'balance_noData',
                tip: '没有更多的数据',
                icon: 'http://img.zanjl.com/Content/img/image/withoutData@2x.png'
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style>
#balance .mescroll-downwarp .downwarp-content {
  bottom: 1.25rem !important;
}
</style>

<style lang="scss">
#balance_mescroll {
  .mescroll-empty {
    padding-top: 30%;
  }
}
</style>

<style lang="scss" scoped="scoped">
@import '../../assets/css/pub';
#balance {
  height: 100vh;
  position: relative;
  /deep/ .vux-header {
    background: #7a29f4;
    position: relative;
    z-index: 2;
    .vux-header-left {
      .left-arrow:before {
        border-color: #ffffff;
      }
      i {
        color: #ffffff;
      }
    }
    .vux-header-title {
      color: #ffffff;
    }
  }
  /*/deep/ .weui-toast {*/
  /*  width: auto !important;*/
  /*}*/
  .head {
    width: 100%;
    height: 4.0875rem;
    background: #7a29f4;
    position: relative;
    margin-top: -1.15rem;
    .posi_bala {
      width: 9.1125rem;
      height: 4.7375rem;
      background: url('http://img.zanjl.com/Content/img/image/tixian_back1@2x.png');
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%);
      .bala {
        width: 3.3625rem;
        height: 3.2rem;
        position: absolute;
        left: 0;
        top: 0;
        p {
          font-size: 0.325rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 0.325rem;
          margin: 0.625rem 0 0 0.825rem;
        }
      }
      .cash {
        margin: 1.8875rem 0 0;
        h2 {
          display: inline-block;
          font-size: 0.95rem;
          font-family: SourceHanSansSC-Regular;
          font-weight: bold;
          color: rgba(255, 255, 255, 1);
          line-height: 0.95rem;
          margin-left: 0.85rem;
        }
        span {
          display: block;
          height: 0.975rem;
          font-size: 0.4rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 0.975rem;
          margin-right: 1.3375rem;
          float: right;
        }
      }
      .award{
        padding: 0 0.85rem;
        margin-top: .6rem;
        p{
          font-size: .325rem;
          font-family:Source Han Sans SC;
          font-weight:400;
          color:rgba(255,255,255,1);
          line-height: .5rem;
          display: inline-block;
          vertical-align: middle;
        }
        img{
          width: .45rem;
          height: .45rem;
          display: inline-block;
          vertical-align: middle;
          margin-left: .25rem;
        }
      }
    }
  }
  .shade {
    position: absolute;
    left: 0;
    top: 0.8rem;
    width: 100%;
    height: 5.2375rem;
    z-index: 3;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      width: 1.2rem;
      height: 0.96rem;
      display: inline-block;
      position: absolute;
      right: 1.8rem;
      bottom: 1.12rem;
    }
    i{
      display: inline-block;
      width: .45rem;
      height: .45rem;
      position: absolute;
      left: 3.27rem;
      bottom: .23rem;
    }
  }
  .conList {
    margin-top: 2.25rem;
    h2.conListH2 {
      font-size: 0.45rem;
      font-family: Adobe Heiti Std;
      font-weight: bold;
      color: rgba(26, 26, 26, 1);
      line-height: 0.45rem;
      padding: 0.25rem 0.525rem;
    }
    ul.conListUl {
      padding: 0 0.25rem;
      li.conListLi {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 0.35rem 0 rgba(48, 48, 48, 0.1);
        border-radius: 0.1rem;
        padding: 0.15rem;
        margin-bottom: 0.15rem;
        .listTent {
          width: 17%;
          text-align: center;
          h2 {
            font-size: 0.275rem;
            font-family: Source Han Sans SC;
            color: rgba(51, 51, 51, 1);
            line-height: 0.5rem;
            padding: 0.125rem 0;
          }
          ul {
            li {
              display: block;
              height: 0.6rem;
              text-align: center;
            }
          }
        }
        .listTent1 {
          div {
            height: 0.6rem;
            line-height: 0.6rem;
            p {
              font-size: 0.275rem;
              font-family: Source Han Sans SC;
              // color: rgba(30, 186, 53, 1);
              line-height: 0.5rem;
              height: inherit;
              line-height: inherit;
            }
            .green {
              color: #1eba35;
            }
            .red {
              color: #fe0000;
            }
            .yellow {
              color: #ffcc00;
            }
          }
        }
        .listTent2 {
          ul {
            padding: 0;
            li {
              font-size: 0.25rem;
              font-family: Source Han Sans SC;
              color: rgba(102, 102, 102, 1);
              line-height: 0.5rem;
            }
          }
        }
        .listTent3 {
          ul {
            padding: 0;
            li {
              font-size: 0.15rem;
              font-family: Source Han Sans SC;
              color: rgba(102, 102, 102, 1);
              line-height: 0.35rem;
            }
            li.date {
              transform: scale(0.74);
            }
          }
        }
      }
    }

    .invitation {
      padding: 0;
      margin: .1875rem;
      .title-card {
        padding: 0 .5rem;
        height: .9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        box-shadow: 0 .0125rem .025rem 0 rgba(46, 46, 46, 0.2);
        border-radius: .0625rem;
        div {
          flex: 1;
          line-height: .9rem;
          /*font-size: $default_smallfont_size;*/
          font-size: .34rem;
          color: #666666;
          text-align: center;
        }
      }
      .card {
        margin-top: .125rem;
        margin-bottom: 0;
        padding: 0 .5rem;
        background-color: #fff;
        box-shadow: 0 .0125rem .025rem 0 rgba(46, 46, 46, 0.2);
        border-radius: .0625rem;
        .top {
          height: .9rem;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          div {
            flex: 1;
            line-height: .9rem;
            font-size: $default_smallfont_size;
            color: $default_font_color;
            text-align: center;
          }
          .cat-stock-in {
            color: #1eba35;
          }
          .cat-stock-out {
            color: #ff0000;
          }
          .cat-reward {
            color: #bb36fe;
          }
          .cat-withdraw {
            color: #ffc000;
          }
          .cat-unknown {
            color: #333333;
          }
          .cat-refund {
            color: #ff4e00;
          }
        }
        .bottom {
          border-top: .0125rem solid #f7f7f7;
          height: .9rem;
          display: flex;
          align-items: center;
          justify-content: center;
          div {
            line-height: .9rem;
            font-size: $default_smallfont_size;
            color: $default_font_color;
          }
          .no {
            flex: 3;
            text-align: left;
          }
          .date {
            flex: 2;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
